<template>
	<section class="taskDetail">
		<div class="table">
			<el-row class="header_row">
                <el-col :span="24">任务基本信息</el-col>
           	</el-row>
            <el-row>
                <el-col :span="4" class="col_1">任务名称：</el-col>
                <el-col :span="20" class="col_2">{{taskDetail.taskName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">执行类型：</el-col>
                <el-col :span="20" class="col_2">
                	<el-radio v-model="taskDetail.implementType" class="radio" label="1" :disabled="disabled">即时</el-radio>
                	<el-radio v-model="taskDetail.implementType" class="radio" label="2" :disabled="disabled">周期执行</el-radio>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">关注热点：</el-col>
                <el-col :span="20" class="col_2">
                	<el-checkbox v-model="taskDetail.vipLowPricePC" :disabled="disabled">vip低价(PC)</el-checkbox>
                	<el-checkbox v-model="taskDetail.LowPricePC" :disabled="disabled">低价(PC)</el-checkbox>
                	<el-checkbox v-model="taskDetail.fake" :disabled="disabled">假货</el-checkbox>
                	<el-checkbox v-model="taskDetail.vipLowPriceAPP" :disabled="disabled">vip低价(APP)</el-checkbox>
                	<el-checkbox v-model="taskDetail.LowPriceAPP" :disabled="disabled">低价(APP)</el-checkbox>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">任务类型：</el-col>
                <el-col :span="20" class="col_2">
                	<el-radio v-model="taskDetail.taskType" class="radio" label="1" :disabled="disabled">关键词</el-radio>
                </el-col>
            </el-row>
		</div>
		<el-row class="margin-table">
            <el-table :data="tableList" v-model="tableList" border style="width: 100%;">
                <el-table-column prop="sku"  label="sku关键词" align='center'></el-table-column>
                <el-table-column prop="platform"  label="平台" align='center'></el-table-column>
                <el-table-column prop="fake" label="假货" align='center'></el-table-column>
                <el-table-column prop="authorizedLowPricePC" label="授权低价(PC)" align='center' ></el-table-column>
                <el-table-column prop="notAuthorizedLowPricePC" label="非授权低价(PC)" align='center' ></el-table-column>
                <el-table-column prop="authorizedLowPriceAPP" label="授权低价(APP)" align='center' ></el-table-column>
                <el-table-column prop="notAuthorizedLowPriceAPP" label="非授权低价(APP)" align='center' ></el-table-column>
                <el-table-column prop="label" label="标签" align='center' ></el-table-column>
            </el-table>
        </el-row>
		<el-row class="paging" style='margin-top: 40px;'>
			<el-pagination
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="pagingUserData.pageNum"
				:page-sizes="pagingUserData.pageSizes"
				:page-size="taskDetail.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagingUserData.total">
			</el-pagination> 
		</el-row>
	</section>
</template>

<script>
	import Vue from 'vue'
	import {Row,Col,Radio,Checkbox,Table,TableColumn,Message,MessageBox,Pagination} from 'element-ui'
	import { mapGetters} from 'vuex';
	
	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Radio);
	Vue.use(Checkbox);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	
	Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
	export default{
		head(){
			return {
	            title: this.title
	        }
		},
		data(){
			return {
      			tabName: '任务详情',
            	title: '任务详情',
            	disabled:false,
            	taskDetail:{
            		taskName:'品牌1-任务001',
            		implementType:'1',
            		taskType:'1',
            		vipLowPricePC:true,
            		LowPricePC:false,
            		fake:false,
            		vipLowPriceAPP:false,
            		LowPriceAPP:false,
					pageSize: 10, // 每页条数
					pageNum: 1,
            	},
				pagingUserData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
            	tableList:[],
            	
           }
		},
		
		computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList',
				'currentPage': 'currentPageShopManage',
                'totalCount': 'totalCountShopManage',
                'pageSize': 'pageSizeShopManage',
            }),
		},
		mounted(){
			
		},
		methods: {
			handleCurrentChange(val) {
				this.taskDetail.pageNum = val;
	        },
	        handleSizeChange(val) {
	        	this.taskDetail.pageSize = val;
				this.taskDetail.pageNum = 1;
	        },
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		}
		
	}
</script>

<style lang="scss">
	.taskDetail{
		.table{
			margin-top: 10px;
	        border: 1px solid #ccc;
	        font-size: 14px;
	        .header_row {
		        border-bottom: 1px solid #ccc;
		        line-height: 40px;
		        font-weight: bold;
		        color: #008dd8;
		        text-indent: 10px;
		        background: #f1f2f2;
		    }
		    .col_2, .col_4 {
		        text-align: left;
		        text-indent: 3px;
		    }
		
		    .col_1, .col_3 {
		        text-align: right;
		        background: #f1f2f2;
		    }
		    .col_1, .col_2, .col_3 {
		        border-right: 1px dotted #ccc;
		        border-bottom: 1px dotted #ccc;
		    }
		    .col_4 {
		        border-bottom: 1px dotted #ccc;
		    }
		    .el-col {
		        height: 40px;
		        line-height: 40px;
			    .el-button-group {
			        margin-left: 10px;
			 	}
	    	}
	    }
	    .margin-table {
	    	margin-top: 40px;
			.el-icon-close{padding-right: 20px;}
			.input_text .el-input__inner{padding-right: 25px;}
		}
    	.operator-btn{
    		text-align:center;
            padding:0 10px;
            .el-button + .el-button{
                margin-left:0;
            }
        }
	}
</style>